<template>
  <div class="node-entry">
    <start-app
      v-if="app.type == 0"
      :nodeConfig.sync="app"
      :moduleList="moduleListFrom"
      @startAppSelectChange="startAppSelectChangeHandler"
      @open="openDrawer"
    />
    <!-- <trigger
      v-if="app.type == 1"
      :nodeConfig.sync="app"
      :moduleList="moduleList"
      :parent="parent"
      @triggleActionSelectChange="triggleActionSelectChangeHandler"
      @open="openDrawer"
    /> -->
    <condition
      v-if="app.type == 2"
      :nodeConfig.sync="app"
      :moduleList="moduleListTo"
      :parent="parent"
      @open="openDrawer"
    />
    <action-app
      v-if="app.type == 3"
      :nodeConfig.sync="app"
      :moduleList="moduleListTo"
      :parent="parent"
      @open="openDrawer"
      @executeApplicationSelectChange="onExecuteApplicationSelectChangeHandler"
    />
    <message
      v-if="app.type == 4"
      :nodeConfig.sync="app"
      :moduleList="moduleListTo"
      :parent="parent"
      @open="openDrawer"
    />
    <execution-code
      v-if="app.type == 6"
      :nodeConfig.sync="app"
      :moduleList="moduleListTo"
      :parent="parent"
      @open="openDrawer"
    />
    <el-popconfirm
      :confirm-button-text="$t('common.base.confirm')"
      :cancel-button-text="$t('common.base.cancel')"
      icon="el-icon-info"
      icon-color="red"
      :title="$t('common.connector.trigger.deleteNodeConfirm')"
      @confirm="deleteApp"
      v-if="canDelete"
    >
      <div class="delete-btn" slot="reference">
        <i class="iconfont icon-shanchu1" />
      </div>
    </el-popconfirm>
  </div>
</template>
<script>
import startApp from './startApp.vue';
import actionApp from './actionApp.vue';
import trigger from './trigger.vue';
import condition from './condition.vue';
import message from './message.vue';
import executionCode from './executionCode.vue';
export default {
  name: 'node',
  props: {
    nodeConfig: {
      type: Object,
      default: () => ({}),
    },
    moduleListFrom: {
      type: Array,
      default: () => [],
    },
    moduleListTo: {
      type: Array,
      default: () => [],
    },
    parent:{
      type: Object,
      default: () => ({}),
    }
  },
  computed:{
    canDelete(){
      return this.nodeConfig?.type != 0 && this.nodeConfig?.type != 1
    }
  },
  watch: {
    nodeConfig: {
      handler(newVal) {
        this.app = newVal;
      },
      deep: true,
      immediate: true,
    },
    app: {
      handler(newVal) {
        this.$emit('update:nodeConfig', newVal);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      app: this.nodeConfig,
    };
  },
  methods: {
    deleteApp(){
      this.$emit('delete',this.nodeConfig?.type==2?this.nodeConfig.uniqueId:this.nodeConfig.parentId)
    },
    openDrawer(){
      this.$emit('open')
    },
    startAppSelectChangeHandler() {
      this.$emit('startAppSelectChange')
    },
    triggleActionSelectChangeHandler() {
      this.$emit('triggleActionSelectChange')
    },
    onExecuteApplicationSelectChangeHandler() {
      this.$emit('executeApplicationSelectChange')
    }
  },
  components: {
    [startApp.name]: startApp,
    [actionApp.name]: actionApp,
    [trigger.name]: trigger,
    [condition.name]: condition,
    [message.name]: message,
    [executionCode.name]:  executionCode,
  },
};
</script>
